<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>忘记密码</title>
	<link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../style/common.css">
	<link rel="stylesheet" href="../../style/home/article.css">
	<link rel="stylesheet" href="../../style/login/register.css">
	<script src="../../libs/jquery-3.2.1.min.js"></script>
	<script src="../../libs/vue.js"></script>
	<!--<script src="../../jsc/axios.min.js"></script>-->
	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>-->
	<script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
	<script src="../../libs/node_modules/echarts/dist/echarts.js"></script>
	<script src="../../jsc/axios.min.js"></script>
	<script src="../../jsc/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<!--<script src="js/system.js"></script>-->
</head>
<body>
<div id="app" v-cloak>
	<header-component></header-component>
	<navsearch-component></navsearch-component>
	<main>
		<div class="content">
			<div class="register-box">
				<form action="" class="register-form" name="content">
					<div class="register-process" style="margin-bottom: 4rem;position: relative">
						<span :class="{ 'active' : step_number == 1 }">1</span>手机验证
						<hr style="border:none;border-bottom:1px dashed #FE7600;height:1px;width: 8.94rem">
						<span :class="{ 'active' : step_number == 2 }">2</span>修改密码
						<hr style="border:none;border-bottom:1px dashed #BFBFBF;height:1px;width: 8.94rem">
						<span :class="{ 'active' : step_number == 3 }">√</span>修改成功
					</div>
					<div class="register-input-container" v-if="step_number == 1">
						<div class="register-input-box">
							<div class="register-input-item">
								<div class="register-input-name">
									<img src="../../static/icons/手机1.png" alt="">
									<span>手机号</span>
								</div>
								<input type="text" placeholder="请输入11位手机号" name="mobile" v-model="phone">
							</div>
						</div>
						<div class="register-input-box">
							<div class="register-input-item" style="width: 31.75rem">
								<div class="register-input-name">
									<img src="../../static/icons/验证码.png" alt="">
									<span>验证码</span>
								</div>
								<input type="text" placeholder="请输入验证码" name="code" v-model="code">
							</div>
							<a href="javascript:;" class="verify" @click="getcode">获取验证码 <span v-if="!timeOff">({{ time }})</span></a>
						</div>
						<div class="register-input-box" style="padding-top: 1rem">
							<div class="register-btn" style="width:100%" @click="next">下一步</div>
						</div>
					</div>
					<div class="register-input-container" v-if="step_number == 2">
						<div class="register-input-box">
							<div class="register-input-item">
								<div class="register-input-name">
									<img src="../../static/icons/密码(1).png" alt="">新密码
								</div>
								<input type="password" placeholder="请设置6~12位" name="password" v-model="password">
							</div>
						</div>
						<div class="register-input-box">
							<div class="register-input-item">
								<div class="register-input-name">
									<img src="../../static/icons/密码(1).png" alt="">确认密码
								</div>
								<input type="password" placeholder="请设置6~12位" name="auth_password" v-model="repeatpwd">
							</div>
						</div>
						<div class="register-input-box" style="padding-top: 1rem">
							<div class="register-btn" style="width:48%" @click="step_number = 1">上一步</div>
							<div class="register-btn" style="width:48%;margin-left:4%" @click="submit">修改密码</div>
						</div>
					</div>
					<div class="register-success" v-if="step_number == 3" style="min-width: 17rem;width: auto">
						<img src="../../static/images/成功(1).png" alt="">
						<div class="success-tips">恭喜您，重置密码成功</div>
						<div class="success-btn">
							<a class="orange" href="../../views/login/login.html">去登录</a>
							<a class="default" href="../../index.html">进入首页</a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</main>
	<footer-component></footer-component>
</div>
<style>
	.register-input-check input[type='checkbox']:checked {
		background: url("../../static/icons/选中(1).png") no-repeat;
		border: 1px solid #FE7600;
		background-position-x: -2px;
		background-position-y: -2px;
	}
</style>
<script src="../../jsc/common.js"></script>
<script src="../../jsc/component.js"></script>
<script>
	function perfect() {
		window.location.href = 'perfect-info-station.html'
	}

	new Vue({
		el: "#app",
		data: {
			phone:"",		// 手机号
			code:"",		// 验证码

			step_number:1,			// 当前步骤

			password:"",			// 密码
			repeatpwd:"",			// 确认密码

			time:60,
			timeOff: true
		},
		mounted() {
		},
		filters: {

		},
		methods: {
			// 手机号验证码
			getcode: function () {
				var a = new FormData(document.forms.namedItem("content"));
				sendTime(a.get('mobile'),'resetpwd',this)
			},
			// 下一步
			next(){
				var data = transFormData({ mobile: this.phone, event: 'resetpwd', captcha: this.code });

				axios.post(sysurl + 'sms/check', data).then(res => {
					if (res.data.code == 1) {
						// 执行下一步操作
						this.step_number = 2;
					} else {
						layer.msg(res.data.msg);
					}
				})
			},
			// 提交前验证
			submit(){
				if(!/^1[3456789]\d{9}$/.test(this.phone)){
					layer.msg("手机号格式错误");
					this.step_number = 1;
					return false;
				}

				if(!this.password){layer.msg("请输入新密码");return false;}
				if(!this.repeatpwd){layer.msg("请确认新密码");return false;}

				if(this.password != this.repeatpwd){layer.msg("两次密码输入不一致");return false;}

				var data = transFormData({ mobile : this.phone , newpassword : this.password , captcha : this.code });

				this.resetPassword(data);
			},
			// 重置密码	user/resetpwd
			resetPassword(data){
				axios.post(sysurl + 'user/resetpwd', data).then(res => {
					if (res.data.code == 1) {
						// 执行下一步操作
						layer.msg(res.data.msg);
						this.step_number = 3;
					} else {
						layer.msg(res.data.msg);
					}
				})
			}
		}
	})
</script>
</body>
</html>
